"use client";
import Image from "next/image";
import { useEffect, useState } from "react";
import { cn } from "@/cuicui/utils/cn";

//TODO : Improve mobile version to display the image down the corresponding text instead of at the full bottom

const data = [
  {
    title: "Visit the cuicui.day website",
    content:
      "Visit the cuicui.day website and browse through the dozens of available components to help you build your web or mobile application.",
    srcImage:
      "https://images.unsplash.com/photo-1717501219716-b93a67d2f7b2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8",
  },
  {
    title: "Browse the site and choose your component",
    content:
      "Browse the categories, the variants of each component, try them out, and integrate them into your project with just a few clicks.",
    srcImage:
      "https://images.unsplash.com/photo-1717501219074-943fc738e5a2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8M3x8fGVufDB8fHx8fA%3D%3D",
  },
  {
    title: "Set up your environment",
    content:
      "Set up your development environment to integrate Cuicui library components. You can customize them infinitely to match your branding guidelines.",
    srcImage:
      "https://images.unsplash.com/photo-1717501218636-a390f9ac5957?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Nnx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    title: "Copy and paste the code",
    content:
      "Copy and paste the code generated by the Cuicui library into your project and enjoy modern, ready-to-use components.",
    srcImage:
      "https://images.unsplash.com/photo-1717501219781-54ac9d09051b?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8fA%3D%3D",
  },
];

export function Variant2FeatureFourImages() {
  const [featureOpen, setFeatureOpen] = useState<number>(0);
  const [timer, setTimer] = useState<number>(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setTimer((prev) => prev + 10);
    }, 10);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (timer > 10000) {
      setFeatureOpen((prev) => (prev + 1) % data.length);
      setTimer(0);
    }
  }, [timer]);

  return (
    <div className="container">
      <div className="mb-20 text-center">
        <p className=" mb-2 font-medium text-lg text-violet-500 uppercase">
          How does it work ?
        </p>

        <h2 className="mb-4 shrink-0 font-medium text-3xl text-gray-800 dark:text-gray-300">
          How to use the Easiest component librairy : Cuicui
        </h2>
      </div>
      <div className=" grid grid-cols-1 gap-4 md:grid-cols-2">
        <div className="space-y-6 ">
          {data.map((item, index) => (
            <button
              className="w-full"
              key={item.title}
              onClick={() => {
                setFeatureOpen(index);
                setTimer(0);
              }}
              type="button"
            >
              <TextComponent
                content={item.content}
                isOpen={featureOpen === index}
                loadingWidthPercent={featureOpen === index ? timer / 100 : 0}
                number={index + 1}
                title={item.title}
              />
            </button>
          ))}
        </div>
        <div className="h-full">
          <div
            className={cn(
              "relative h-[500px] w-full overflow-hidden rounded-lg",
            )}
          >
            {data.map((item, index) => (
              <Image
                alt={item.title}
                className={cn(
                  "absolute h-[500px] w-full transform-gpu rounded-lg object-cover transition-all duration-300",
                  featureOpen === index ? "scale-100" : "scale-70",
                  featureOpen > index ? "translate-y-full" : "",
                )}
                height={800}
                key={item.title}
                src={item.srcImage}
                style={{ zIndex: data.length - index }}
                width={400}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Variant2FeatureFourImages;

function TextComponent({
  number,
  title,
  content,
  isOpen,
  loadingWidthPercent,
}: Readonly<{
  number: number;
  title: string;
  content: string;
  isOpen: boolean;
  loadingWidthPercent?: number;
}>) {
  return (
    <div
      className={cn(
        "transform-gpu rounded-lg transition-colors",
        isOpen ? "bg-violet-600/10" : "opacity-50 saturate-0",
      )}
    >
      <div className="flex w-full items-center gap-4 p-4">
        <p
          className={cn(
            "inline-flex size-8 items-center justify-center rounded-md bg-violet-500/20 text-violet-600",
          )}
        >
          {number}
        </p>
        <h2
          className={cn(
            "text-left font-medium text-gray-800 text-xl dark:text-gray-200",
          )}
        >
          {title}
        </h2>
      </div>
      <div
        className={cn(
          "w-full transform-gpu overflow-hidden text-left text-gray-600 transition-all duration-500 dark:text-gray-400",
          isOpen ? " max-h-64" : "max-h-0",
        )}
      >
        <p className="p-4 text-lg">{content}</p>
        <div className="w-full px-4 pb-4">
          <div className="relative h-1 w-full overflow-hidden rounded-full">
            <div
              className={cn("absolute top-0 left-0 h-1 bg-violet-500")}
              style={{ width: `${loadingWidthPercent}%` }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
